<template>
    <div>
        <div class="main_content">
            <div class="cantainer" v-show="msgExpend">
                <Icon class="close" type="ios-close" size="30" @click="onMsgExpend"/>
                <ul>
                    <li  v-for="(item,index) in  btnList" :key="index" :class="item.id == tabActiveName?'active':'hover_tab'" @click="setTabClick(item.id)">
                        <div class="iconbox">
                            <img :src="item.id == tabActiveName?item.iconSelectPath:item.iconPath" class="li_icon" />
                            <Tag v-if="item.count" class="tag" color="error">{{ item.count>99?'99+':item.count }}</Tag>
                        </div>

                        <p >{{item.name}}</p>
                    </li>
                </ul>
            </div>
            <!-- <div class="module">
                <Tabs v-model="tabActiveName"  @on-click="setTabClick">
                    <TabPane :label="item.count ==undefined ||0 ? item.name: item.name+'('+ item.count + ')'" :name="String(item.id)" v-for="(item,index) in btnList" :key="index"></TabPane>
                </Tabs>
            </div> -->
            <div class="right_content">
                <div class="content">
                    <div class="item" >
                        <el-button @click="getDel" :type="msgList.length > 0?'primary':'info'"  plain :disabled="msgList.length == 0">删除</el-button>
                        <el-button @click="getRead" :type="disableFlag || readList.length == 0? 'info' : 'primary'" plain :disabled="disableFlag ||readList.length == 0" v-if="mFlag">标记已读</el-button>
                        <el-button @click="getAllRead"  plain :type="count == 0 ||!count? 'info' : 'primary'" :disabled="count == 0 ||!count" v-if="mFlag">全部已读</el-button>
                        <el-button @click="getAllDel" type="primary"  plain>全部删除</el-button>
                    </div>
                    <div class="table" >
                        <el-table :data="list" style="width: 100%" @select="listSelectOne" @select-all="listSelectALL"  :header-cell-style="headClass">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column label="消息内容">
                                <template slot-scope="scope">
                                    <span :class="scope.row.state == 1 ? 'activebox' : ''">【{{ scope.row.title }}】</span>
                                    <span  :class="scope.row.state == 1 ? 'activebox' : ''">{{ scope.row.content }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="时间" width="200">
                                <template slot-scope="scope">
                                    <span  :class="scope.row.state == 1 ? 'activebox' : ''">{{ scope.row.time }}</span>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-button type="text" class="box" @click="rowClick(scope.row)" >查看</el-button>
                                </template>
                            </el-table-column> -->
                        </el-table>
                    </div>
                    <div   style="margin-top:20px;">
                    <Page v-if="totalCount" style="text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
            </div>
                </div>
            </div>


        </div>
         <!-- 设备模块弹框 -->
        <Modal v-model="handleMachModal" width="800px" :mask-closable="false" :title="isAdd ? '报警信息处理' : '报警信息详情'">
            <div class="msg">
                <div class="handle-details">
                    <div class="title2">设备信息</div>
                    <div class="title3">
                        报警设备:
                        <span>{{ machTypeName }}</span>
                    </div>
                    <div class="title3">
                        设备编号:
                        <span>{{ machCode }}</span>
                    </div>
                    <div class="title3">
                        操作手:
                        <span v-for="(val, i) in operatorList" :key="i">{{ val.operEmpName }}/{{ val.phone }}</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警规则</div>
                    <div class="title3">
                        报警类型:
                        <span v-if="ruleType == 101">出区域</span>
                        <span v-if="ruleType == 102">偷漏油</span>
                        <span v-if="ruleType == 103">电量</span>
                        <span v-if="ruleType == 104">怠机</span>
                        <span v-if="ruleType == 105">停机</span>
                        <span v-if="ruleType == 106">工作</span>
                        <span v-if="ruleType == 107">超速</span>
                        <span v-if="ruleType == 110">倾斜</span>
                    </div>
                    <div class="title3">
                        报警规则:
                        <el-button type="primary" @click="searchGps" size="small" plain v-show="ruleType == 101">点击查看区域范围</el-button>
                        <span v-if="ruleType == 102">暂无</span>
                        <span v-if="ruleType == 103">暂无</span>
                        <span v-if="ruleType == 109">暂无</span>
                        <span v-if="ruleType == 104">怠机时长>{{ ruleValue }}分钟</span>
                        <span v-if="ruleType == 105">停机时长>{{ ruleValue }}分钟</span>
                        <span v-if="ruleType == 106">工作时长>{{ ruleValue }}分钟</span>
                        <span v-if="ruleType == 107">行驶速度>{{ ruleValue }}km/h</span>
                        <span>
                            <span  v-if="ruleType == 110 && preRotationX > 0 ">前倾斜角度>{{preRotationX}}° </span>
                            <span  v-if="ruleType == 110 && postRotationX > 0 ">, 后倾斜角度>{{postRotationX}}° </span>
                            <span  v-if="ruleType == 110 && leftRotationZ > 0 ">, 左倾斜角度>{{leftRotationZ}}° </span>
                            <span  v-if="ruleType == 110 && rightRotationZ > 0 ">, 右倾斜角度>{{rightRotationZ}}° </span>
                        </span>
                    </div>
                    <div class="title3" v-if="timeList.length>0">
                        生效时间:
                        <span v-for="(val, i) in timeList" :key="i">{{ val.startTime }}--{{ val.endTime }}</span>
                    </div>
                    <div class="title3" v-if="timeList.length==0">
                        生效时间:
                        <span>00:00--23:59</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警信息</div>
                    <div class="title3">
                        报警时间:
                        <span>{{ triggerTime }}</span>
                    </div>
                    <div class="title3">
                        报警地点:
                        <span>{{ ads }}</span>
                    </div>
                    <div class="title3">
                        报警详情:
                        <div v-show="ruleType == 101" style="width:600px;height:300px">
                            <div id="fenceMap2" class="fenceMap"></div>
                        </div>
                        <span v-if="ruleType == 102">暂无</span>
                        <span v-if="ruleType == 103">暂无</span>
                        <span v-if="ruleType == 109">{{triggerValue}}</span>
                        <span v-if="ruleType == 104">怠机时长{{ triggerValue }}分钟</span>
                        <span v-if="ruleType == 105">停机时长{{ triggerValue }}分钟</span>
                        <span v-if="ruleType == 106">工作时长{{ triggerValue }}分钟</span>
                        <span v-if="ruleType == 107">行驶速度{{ triggerValue }}km/h</span>
                        <span v-if="ruleType == 110">倾斜角度{{triggerValue}}° </span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警处理</div>
                    <div class="title3" v-if="!isAdd">
                        处理人:
                        <span>{{handleUserName}}</span>
                    </div>
                    <div class="title3" v-if="!isAdd">
                        处理时间:
                        <span>{{handleTime }}</span>
                    </div>
                    <div class="title3">
                        <span class="tip" v-if="isAdd" style="color:red">*</span>
                        报警原因
                    </div>
                    <div class="list">
                        <div class="item" style="width:100%;align-items: center">
                            <el-input v-model="handleRemark" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 600px;margin: 0 auto;font-size:14px" :disabled="!isAdd"></el-input>
                            </div>
                    </div>
                    <div class="title3">
                        <span class="tip" v-if="isAdd" style="color:red">*</span>
                        处理结果
                    </div>
                    <div class="list">
                        <div class="item" style="width:100%;align-items: center">
                            <el-input v-model="handleResult" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 600px;margin: 0 auto;font-size:14px" :disabled="!isAdd"></el-input>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(0)" v-if="isAdd" type="info" size="small" plain>取消</el-button>
                <el-button @click="ok" type="primary" v-if="isAdd" size="small" plain>确定</el-button>
            </div>
        </Modal>
        <!-- 劳务模块弹框 -->
        <Modal v-model="handleEmpModal" width="800px" :mask-closable="false" :title="isAdd ? '报警信息处理' : '报警信息详情'">
            <div class="msg">
                <div class="handle-details">
                    <div class="title2">人员信息</div>
                    <div class="title3">
                        人员名称:
                        <span>{{empName }}</span>
                    </div>
                    <div class="title3">
                        工种:
                        <span>{{workTypeName}}</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警规则</div>
                    <div class="title3">
                        报警类型:
                        <span v-if="ruleType == 101">跌落报警</span>
                        <span v-if="ruleType == 102">摔倒报警</span>
                        <span v-if="ruleType == 103">脱帽报警</span>
                        <span v-if="ruleType == 104">SOS报警</span>
                        <span v-if="ruleType == 105">碰撞报警</span>
                        <span v-if="ruleType == 106">静止报警</span>
                    </div>
                    <div class="title3">
                        报警规则:
                        <span v-if="ruleType == 101">人员高空跌落</span>
                        <span v-if="ruleType == 102">人员摔倒</span>
                        <span v-if="ruleType == 103">人员脱下安全帽</span>
                        <span v-if="ruleType == 104">人员SOS呼叫</span>
                        <span v-if="ruleType == 105">人员发生碰撞</span>
                        <span v-if="ruleType == 106">人员原地静止不动</span>
                    </div>
                    <div class="title3" v-if="timeList.length>0">
                        生效时间:
                        <span v-for="(val, i) in timeList" :key="i">{{ val.startTime }}--{{ val.endTime }}</span>
                    </div>
                    <div class="title3" v-if="timeList.length==0">
                        生效时间:
                        <span>00:00--23:59</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警信息</div>
                    <div class="title3">
                        报警时间:
                        <span>{{triggerTime }}</span>
                    </div>
                    <div class="title3">
                        报警地点:
                        <span>{{ads }}</span>
                    </div>
                    <div class="title3">
                        报警详情:
                        <span v-if="ruleType == 101">人员高空跌落</span>
                        <span v-if="ruleType == 102">人员摔倒</span>
                        <span v-if="ruleType == 103">人员脱下安全帽</span>
                        <span v-if="ruleType == 104">人员SOS呼叫</span>
                        <span v-if="ruleType == 105">人员发生碰撞</span>
                        <span v-if="ruleType == 106">人员原地静止不动</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警处理</div>
                    <div class="title3" v-if="!isAdd">
                        处理人:
                        <span>{{handleUserName}}</span>
                    </div>
                    <div class="title3" v-if="!isAdd">
                        处理时间:
                        <span>{{handleTime }}</span>
                    </div>
                    <div class="title3">
                        <span class="tip" v-if="isAdd" style="color:red">*</span>
                        报警原因
                    </div>
                    <div class="list">
                        <div class="item" style="width:100%;align-items: center">
                            <el-input v-model="handleRemark" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 600px;margin: 0 auto;font-size:14px" :disabled="!isAdd"></el-input>
                        </div>
                    </div>
                    <div class="title3">
                        <span class="tip" v-if="isAdd" style="color:red">*</span>
                        处理结果
                    </div>
                    <div class="list">
                        <div class="item" style="width:100%;align-items: center">
                            <el-input v-model="handleResult" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 600px;margin: 0 auto;font-size:14px" :disabled="!isAdd"></el-input>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(9)" v-if="isAdd" type="info" size="small" plain>取消</el-button>
                <el-button @click="ok" type="primary" v-if="isAdd" size="small" plain>确定</el-button>
            </div>
        </Modal>
        <!-- 特种设备模块弹框 -->
        <Modal v-model="handleFseModal" width="800px" :mask-closable="false" :title="isAdd ? '报警信息处理' : '报警信息详情'">
            <div class="msg">
                <div class="handle-details">
                    <div class="title2">设备信息</div>
                    <div class="title3">
                        设备类型:
                        <span v-if="type == 1">塔机/{{ modelName }}</span>
                        <span v-if="type == 2">升降机/{{ modelName }}</span>
                    </div>
                    <div class="title3">
                        设备编号:
                        <span>{{ code }}</span>
                    </div>
                    <div class="title3">
                        操作手:
                        <span v-for="(val, i) in operatorList" :key="i">{{ val.name }}/{{ val.phone }}</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警规则</div>
                    <div class="title3">
                        报警类型:
                        <span v-if="ruleType == 101">塔机防碰撞报警</span>
                        <span v-if="ruleType == 102">塔机起重量报警</span>
                        <span v-if="ruleType == 103">塔机力矩报警</span>
                        <span v-if="ruleType == 104">塔机最大幅度报警</span>
                        <span v-if="ruleType == 105">塔机最小幅度报警</span>
                        <span v-if="ruleType == 106">塔机高度上限报警</span>
                        <span v-if="ruleType == 107">塔机回转左限位报警</span>
                        <span v-if="ruleType == 108">塔机回转右限位报警</span>
                        <span v-if="ruleType == 109">塔机风速报警</span>
                        <span v-if="ruleType == 110">塔机倾角报警</span>
                        <span v-if="ruleType == 201">升降机重量报警</span>
                        <span v-if="ruleType == 202">升降机重量报警</span>
                        <span v-if="ruleType == 203">升降机运行速度报警</span>
                        <span v-if="ruleType == 204">升降机前门未关报警</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警信息</div>
                    <div class="title3">
                        报警时间:
                        <span>{{ triggerTime }}</span>
                    </div>
                    <div class="title3">
                        报警详情:
                        <span v-if="ruleType == 101">暂无</span>
                        <span v-if="ruleType == 102">起重量数值{{ triggerValue }}t</span>
                        <span v-if="ruleType == 103">力矩数值{{ triggerValue }}N.m</span>
                        <span v-if="ruleType == 104">幅度数值{{ triggerValue }}m</span>
                        <span v-if="ruleType == 105">幅度数值{{ triggerValue }}m</span>
                        <span v-if="ruleType == 106">高度数值{{ triggerValue }}m</span>
                        <span v-if="ruleType == 107">左回转数值{{ triggerValue }}°</span>
                        <span v-if="ruleType == 108">右回转数值{{ triggerValue }}°</span>
                        <span v-if="ruleType == 109">风速数值{{ triggerValue }}m/s</span>
                        <span v-if="ruleType == 110">倾角数值{{ triggerValue }}°</span>
                        <span v-if="ruleType == 201">重量数值{{ triggerValue }}t</span>
                        <span v-if="ruleType == 202">重量数值{{ triggerValue }}t</span>
                        <span v-if="ruleType == 203">运行速度数值{{ triggerValue }}m/s</span>
                        <span v-if="ruleType == 204">前门未关</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警处理</div>
                    <div class="title3" v-if="!isAdd">
                        处理人:
                        <span>{{handleUserName}}</span>
                    </div>
                    <div class="title3" v-if="!isAdd">
                        处理时间:
                        <span>{{handleTime }}</span>
                    </div>
                    <div class="title3">
                        <span class="tip" v-if="isAdd" style="color:red">*</span>
                        报警原因
                    </div>
                    <div class="list">
                        <div class="item" style="width:100%;align-items: center;">
                            <el-input v-model="handleRemark" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 600px;margin: 0 auto;font-size:14px" :disabled="!isAdd"></el-input>
                        </div>
                    </div>
                    <div class="title3">
                        <span class="tip" v-if="isAdd" style="color:red">*</span>
                        处理结果
                    </div>
                    <div class="list">
                        <div class="item" style="width:100%;align-items: center;">
                            <el-input v-model="handleResult" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 600px;margin: 0 auto;font-size:14px" :disabled="!isAdd"></el-input>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(3)" v-if="isAdd" type="info" size="small" plain>取消</el-button>
                <el-button @click="ok" type="primary" v-if="isAdd" size="small" plain>确定</el-button>
            </div>
        </Modal>
        <!-- 环境模块弹框 -->
        <Modal v-model="handleEnvModal" width="800px" :mask-closable="false" :title="isAdd?'报警信息处理':'报警信息详情'">
            <div class="msg">
                <div class="handle-details">
                    <div class="title2">设备信息</div>
                    <div class="title3">
                        设备类型:
                        <span>{{deviceType}}</span>
                    </div>
                    <div class="title3">
                        设备编号:
                        <span>{{envName}}</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警规则</div>
                    <div class="title3">
                        报警类型:
                        <span v-if="ruleType == 201">PM2.5报警</span>
                        <span v-if="ruleType == 202">PM10报警</span>
                        <span v-if="ruleType == 203">噪声报警</span>
                        <span v-if="ruleType == 204">温度报警</span>
                        <span v-if="ruleType == 205">湿度报警</span>
                        <span v-if="ruleType == 206">风力报警</span>
                        <span v-if="ruleType == 207">风速报警</span>
                        <span v-if="ruleType == 208">TSP报警</span>
                        <span v-if="ruleType == 209">大气压报警</span>
                    </div>
                    <div class="title3">
                        报警规则:
                        <span v-if="ruleType == 201">PM2.5数值>{{ruleMinValue}}ug/m3</span>
                        <span v-if="ruleType == 202">PM10数值>{{ruleMinValue}}ug/m3</span>
                        <span v-if="ruleType == 203">噪声数值>{{ruleMinValue}}dB</span>
                        <span v-if="ruleType == 204">温度数值>{{ruleMinValue}}℃</span>
                        <span v-if="ruleType == 205">湿度数值>{{ruleMinValue}}RH</span>
                        <span v-if="ruleType == 206">风力数值>{{ruleMinValue}}级</span>
                        <span v-if="ruleType == 207">风速数值>{{ruleMinValue}}m/s</span>
                        <span v-if="ruleType == 208">TSP数值>{{ruleMinValue}}ug/m3</span>
                        <span v-if="ruleType == 209">大气压数值>{{ruleMinValue}}mbar</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警信息</div>
                    <div class="title3">
                        报警时间:
                        <span>{{triggerTime }}</span>
                    </div>
                    <div class="title3">
                        报警详情:
                        <span v-if="ruleType == 201">PM2.5数值{{triggerValue}}ug/m3</span>
                        <span v-if="ruleType == 202">PM10数值{{triggerValue}}ug/m3</span>
                        <span v-if="ruleType == 203">噪声数值{{triggerValue}}dB</span>
                        <span v-if="ruleType == 204">温度数值{{triggerValue}}℃</span>
                        <span v-if="ruleType == 205">湿度数值{{triggerValue}}RH</span>
                        <span v-if="ruleType == 206">风力数值{{triggerValue}}级</span>
                        <span v-if="ruleType == 207">风速数值{{triggerValue}}m/s</span>
                        <span v-if="ruleType == 208">TSP数值{{triggerValue}}ug/m3</span>
                        <span v-if="ruleType == 209">大气压数值{{triggerValue}}mbar</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警处理</div>
                    <div class="title3" v-if="!isAdd">
                        处理人:
                        <span>{{handleUserName}}</span>
                    </div>
                    <div class="title3" v-if="!isAdd">
                        处理时间:
                        <span>{{handleTime }}</span>
                    </div>
                    <div class="title3">
                        <span class="tip" v-if="isAdd" style="color:red">*</span>
                        报警原因
                    </div>
                    <div class="list">
                        <div class="item" style="width:100%;align-items: center">
                            <el-input v-model="handleRemark" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 600px;margin: 0 auto;font-size:14px" :disabled="!isAdd"></el-input>
                         </div>
                    </div>
                    <div class="title3">
                        <span class="tip" v-if="isAdd" style="color:red">*</span>
                        处理结果
                    </div>
                    <div class="list">
                        <div class="item" style="width:100%;align-items: center">
                            <el-input v-model="handleResult" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 600px;margin: 0 auto;font-size:14px" :disabled="!isAdd"></el-input>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(4)" v-if="isAdd" type="info" size="small" plain>取消</el-button>
                <el-button @click="ok" type="primary" v-if="isAdd" size="small" plain>确定</el-button>
            </div>
        </Modal>
        <!-- 智能监控模块弹框 -->
        <Modal v-model="handleFimModal" width="800px" :mask-closable="false" :title="isAdd ? '报警信息处理' : '报警信息详情'">
            <div class="msg">
                <div class="handle-details">
                    <div class="title2">设备信息</div>
                    <div class="title3">
                        设备名称:
                        <span>{{deviceName}}</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警规则</div>
                    <div class="title3">
                        报警类型:
                        <span>{{algCheckTypeName}}</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警信息</div>
                    <div class="title3">
                        报警时间:
                        <span>{{triggerTime}}</span>
                    </div>
                    <div class="title3" v-if="personNameList.length>0">
                        报警详情:
                        <span v-for="(item,index) in personNameList" :key="index" style="margin-right:5px">{{item}}</span>
                        <span style="margin-right:0">{{algCheckTypeName}}</span>
                    </div>
                    <div class="title3" v-if="personNameList.length == 0">
                        报警详情:
                        <span>暂无</span>
                    </div>
                    <div class="title3">
                        抓拍照片:
                        <div  v-if="imgList.length>0">
                            <el-carousel   loop  arrow="always" height="360px">
                                <el-carousel-item  v-for="(item, index) in imgList" :key="index">
                                    <img :src="item" alt=""  height="360px" width="640px" />
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div class="fvs_img" v-if="imgList.length == 0">
                            暂无抓拍照片
                        </div>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警处理</div>
                    <div class="title3" v-if="!isAdd">
                        处理人:
                        <span>{{handleUserName}}</span>
                    </div>
                    <div class="title3" v-if="!isAdd">
                        处理时间:
                        <span>{{handleTime }}</span>
                    </div>
                    <div class="title3">
                        <span class="tip" v-if="isAdd" style="color:red">*</span>
                        报警原因
                    </div>
                    <div class="list">
                        <div class="item" style="width:100%;align-items: center">
                            <el-input v-model="handleRemark" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 600px;margin: 0 auto;font-size:14px" :disabled="!isAdd"></el-input>
                        </div>
                    </div>
                    <div class="title3">
                        <span class="tip" v-if="isAdd" style="color:red">*</span>
                        处理结果
                    </div>
                    <div class="list">
                        <div class="item" style="width:100%;align-items: center">
                            <el-input v-model="handleResult" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 600px;margin: 0 auto;font-size:14px" :disabled="!isAdd"></el-input>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(5)" v-if="isAdd" type="info" size="small" plain>取消</el-button>
                <el-button @click="ok" type="primary" v-if="isAdd" size="small" plain>确定</el-button>
            </div>
        </Modal>
        <!-- 考勤设备模块弹框 -->
        <Modal v-model="handleEquipModal" width="800px" :mask-closable="false" :title="isAdd ? '报警信息处理' : '报警信息详情'">
            <div class="msg">
                <div class="handle-details">
                    <div class="title2">设备信息</div>
                    <div class="title3">
                        报警设备:
                        <span>{{machTypeName }}/{{machBrandName }}/{{machModelName}}</span>
                    </div>
                    <div class="title3">
                        设备编号:
                        <span>{{machCode}}</span>
                    </div>
                    <div class="title3">
                        操作手:
                        <span v-for="(val, i) in operatorList" :key="i">{{ val.name }}/{{ val.phone }}</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警规则</div>
                    <div class="title3">
                        报警类型:
                        <span v-if="ruleType == 101">出区域报警</span>
                        <span v-if="ruleType == 102">低电量报警</span>
                        <span v-if="ruleType == 103">拆解硬件报警</span>
                    </div>
                    <div class="title3">
                        报警规则:
                        <el-button type="primary" @click="searchGps" size="small" plain v-show="ruleType == 101">点击查看区域范围</el-button>
                        <span v-if="ruleType == 102">硬件电量低于20%</span>
                        <span v-if="ruleType == 103">拆解硬件</span>
                    </div>
                    <div class="title3" v-if="timeList.length>0">
                        生效时间:
                        <span v-for="(val, i) in timeList" :key="i">{{ val.startTime }}--{{ val.endTime }}</span>
                    </div>
                    <div class="title3" v-if="timeList.length==0">
                        生效时间:
                        <span>00:00--23:59</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警信息</div>
                    <div class="title3">
                        报警时间:
                        <span>{{triggerTime }}</span>
                    </div>
                    <div class="title3">
                        报警地点:
                        <span>{{ads }}</span>
                    </div>
                    <div class="title3">
                        报警详情:
                        <div v-show="ruleType == 101" style="width:600px;height:300px">
                            <div id="fenceMap3" class="fenceMap"></div>
                        </div>
                        <span v-if="ruleType == 102">硬件电量{{triggerValue}}%</span>
                        <span v-if="ruleType == 103">硬件可能被拆解</span>
                    </div>
                </div>
                <div class="handle-details">
                    <div class="title2">报警处理</div>
                    <div class="title3" v-if="!isAdd">
                        处理人:
                        <span>{{handleUserName}}</span>
                    </div>
                    <div class="title3" v-if="!isAdd">
                        处理时间:
                        <span>{{handleTime }}</span>
                    </div>
                    <div class="title3">
                        <span class="tip" v-if="isAdd" style="color:red">*</span>
                        报警原因
                    </div>
                    <div class="list">
                        <div class="item" style="width:100%;align-items: center">
                            <el-input v-model="handleRemark" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 600px;margin: 0 auto;font-size:14px" :disabled="!isAdd"></el-input>
                        </div>
                    </div>
                    <div class="title3">
                        <span class="tip" v-if="isAdd" style="color:red">*</span>
                        处理结果
                    </div>
                    <div class="list">
                        <div class="item" style="width:100%;align-items: center">
                            <el-input v-model="handleResult" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 600px;margin: 0 auto;font-size:14px" :disabled="!isAdd"></el-input>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(10)" v-if="isAdd" type="info" size="small" plain>取消</el-button>
                <el-button @click="ok" type="primary" v-if="isAdd" size="small" plain >确定</el-button>
            </div>
        </Modal>

        <!-- 质量模块弹框 -->
        <Modal v-model="handleReportModal" title="问题详情" width="900px;" :mask-closable="false" :footer-hide="problemReport.state==100||!problemReport.operationFlag">
            <div class="problemReportModal">
                <div class="list">
                    <div class="box">
                        <el-steps  :active="Number(problemReport.active)"  process-status='wait' style="margin:auto;">
                            <el-step :title="item.name" v-for="(item,i) in problemReport.userList" :key="i">
                                <div slot="description">{{item.userName}}</div>
                                <div slot="description" v-if="item.opResult!=2">{{item.time}}</div>
                            </el-step>
                        </el-steps>
                    </div>
                </div>
                <div class="list">
                    <h2>
                        <span>问题信息</span>
                        <span class="logBgc" v-if="problemReport.urgency==1">一般</span>
                        <span class="logBgc" style="background:#909399;" v-if="problemReport.urgency==2">紧急</span>
                    </h2>
                    <div class="item">
                        <div class="left">
                            <span>检查人 ：</span>
                            <span>{{problemReport.userName}}</span>
                        </div>
                        <div class="right">
                            <span>检查部位 ：</span>
                            <span>{{problemReport.partName}}</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="left">
                            <span>检查时间 ：</span>
                            <span>{{problemReport.checkTime}}</span>
                        </div>
                        <div class="right">
                            <span>检查地点 ：</span>
                            <div class="rightText"> {{problemReport.address}}</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="left">
                            <span>问题类别 ：</span>
                            <span>{{problemReport.issueTypeName}}</span>
                        </div>
                        <div class="right">
                            <span>问题明细 ：</span>
                            <span>{{problemReport.issueContent}}</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="left" style="width:100%;">
                            <span>检查说明 ：</span>
                            <span>{{problemReport.checkDesc}}</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="right " >
                            <span style="white-space:nowrap;">现场图片 ：</span>
                            <div class="img">
                                <img :src="item" alt="" v-for="(item,i) in problemReport.imgUrlList" :key="i">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list" >
                    <h2>整改要求</h2>
                    <div class="item">
                        <div class="left">
                            <span>整改人 ：</span>
                            <span>{{problemReport.operatorName}}</span>
                        </div>
                        <div class="right">
                            <span>整改期限 ：</span>
                            <span>{{problemReport.rectifyTime}}</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="textBox">
                            <span>整改要求 ：</span>
                            <div >{{problemReport.rectifyRequire}}</div>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <h2>
                        <span>复查信息</span>
                    </h2>
                    <div class="item">
                        <div class="left">
                            <span>复查人 ：</span>
                            <span>{{problemReport.reviewName}}</span>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <h2>
                        <span>核验信息</span>
                    </h2>
                    <div class="item">
                        <div class="left">
                            <span>核验人 ：</span>
                            <span>{{problemReport.checkName}}</span>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <h2>其他信息</h2>
                    <div class="item">
                        <div class="left">
                            <span>抄送人 ：</span>
                            <span>{{problemReport.sendName}}</span>
                        </div>
                    </div>
                </div>
                <template >
                    <div class="logBox"  style="margin-top:20px;">
                        <div class="list" v-for="(item,i) in problemReport.logList" :key="i">
                            <h2>
                                <span v-if='item.opType==2'>整改结果</span>
                                <span v-if='item.opType==3'>复查结果</span>
                                <span v-if='item.opType==4'>核验结果</span>
                                <span class="logBgc" v-if='item.opType!=1&&item.opResult==1'>合格</span>
                                <span class="logBgc" v-if='item.opType!=1&&item.opResult==2'>不合格</span>
                            </h2>
                            <div class="item">
                                <div class="left">
                                    <span v-if='item.opType==2'> 整改人 ：</span>
                                    <span v-if='item.opType==3'> 复查人 ：</span>
                                    <span v-if='item.opType==4'> 核验人 ：</span>
                                    <span>{{item.userName}}</span>
                                </div>
                                <div class="right">
                                    <span v-if='item.opType==2'>整改时间 ：</span>
                                    <span v-if='item.opType==3'>复查时间 ：</span>
                                    <span v-if='item.opType==4'>核验时间 ：</span>
                                    <span>{{item.opTime}}</span>
                                </div>
                            </div>
                            <div class="item">
                                  <div class="left">
                                    <span v-if='item.opType==2'> 整改说明 ：</span>
                                    <span v-if='item.opType==3'> 复查说明 ：</span>
                                    <span v-if='item.opType==4'> 核验说明 ：</span>
                                    <span>{{item.opDesc}}</span>
                                </div>
                            </div>
                            <div class="item">
                                  <div class="left imgbox">
                                    <span v-if='item.opType==2' > 现场图片 ：</span>
                                    <span v-if='item.opType==3' > 现场图片 ：</span>
                                    <span v-if='item.opType==4' > 现场图片 ：</span>
                                    <div class="img">
                                        <img :src="img"  alt="" v-for="img in item.imgUrlList" :key="img">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <div class="list" v-if="problemReport.operationFlag==1&&problemReport.state==10||problemReport.state==11||problemReport.state==12">
                    <h2>整改结果</h2>
                    <div class="item leftItem">
                        <div class="left img">
                            <span class="tip" style="color:red;">*</span>
                            <span>整改说明 ：</span>
                            <div class="inputbox">
                                <el-input  maxlength="200" show-word-limit placeholder="请输入"  type="textarea"  v-model="opDesc"></el-input>
                            </div>
                        </div>

                    </div>
                    <div class="item">
                        <div class="right img">
                            <span style="white-space:nowrap;">现场图片 ：</span>
                             <el-upload
                                :class="{hideAdd:imgFlag}"
                                ref='uploadImg'
                                :headers="headers"
                                :action="$axios.defaults.baseURL+'/ms/api/quality/check/uploadImg'"
                                list-type="picture-card"
                                accept="image/png, image/jpg, image/jpeg"
                                :before-upload="beforeIMgUpload"
                                :on-success="logImgSuccess"
                                name="file"
                                :limit=10
                                :on-exceed="exceedImg"
                                :on-remove="handleRemove">
                                <i slot="default" class="el-icon-plus" ></i>
                            </el-upload>
                        </div>
                    </div>
                </div>

                 <div class="list" v-if="problemReport.operationFlag==2&&problemReport.state==20">
                    <h2>复查结果</h2>
                    <div class="item" style="justify-content:flex-start" >
                        <span class="tip" style="color:red;">*</span>
                        <span>是否合格 ：</span>
                         <RadioGroup v-model="operationRadio">
                            <Radio label="合格"></Radio>
                            <Radio label="不合格"></Radio>
                        </RadioGroup>
                    </div>
                    <div class="item leftItem">
                        <div class="left img">
                            <span class="tip" style="color:red;">*</span>
                            <span>复查说明 ：</span>
                            <div class="inputbox">
                                <el-input  maxlength="200" show-word-limit placeholder="请输入"  type="textarea"  v-model="opDesc"></el-input>
                            </div>
                        </div>

                    </div>
                    <div class="item">
                        <div class="right img">
                            <span style="white-space:nowrap;">现场图片 ：</span>
                             <el-upload
                                :class="{hideAdd:imgFlag}"
                                ref='uploadImg'
                                :headers="headers"
                                :action="$axios.defaults.baseURL+'/ms/api/quality/check/uploadImg'"
                                list-type="picture-card"
                                accept="image/png, image/jpg, image/jpeg"
                                :before-upload="beforeIMgUpload"
                                :on-success="logImgSuccess"
                                name="file"
                                :limit=10
                                :on-exceed="exceedImg"
                                :on-remove="handleRemove">
                                <i slot="default" class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                    </div>
                </div>
                <div class="list" v-if="problemReport.operationFlag==3&&problemReport.state==30">
                    <h2 >核验结果</h2>
                    <div class="item" style="justify-content:flex-start">
                        <span class="tip" style="color:red;">*</span>
                        <span>是否合格 ：</span>
                         <RadioGroup v-model="operationRadio">
                            <Radio label="合格"></Radio>
                            <Radio label="不合格"></Radio>
                        </RadioGroup>
                    </div>
                    <div class="item leftItem">
                        <div class="left img">
                            <span class="tip" style="color:red;">*</span>
                            <span>核验说明 ：</span>
                            <div class="inputbox">
                                <el-input  maxlength="200" show-word-limit placeholder="请输入"  type="textarea"  v-model="opDesc"></el-input>
                            </div>
                        </div>

                    </div>
                    <div class="item">
                        <div class="right img">
                            <span style="white-space:nowrap;">现场图片 ：</span>
                             <el-upload
                                :class="{hideAdd:imgFlag}"
                                ref='uploadImg'
                                :headers="headers"
                                :action="$axios.defaults.baseURL+'/ms/api/quality/check/uploadImg'"
                                list-type="picture-card"
                                accept="image/png, image/jpg, image/jpeg"
                                :before-upload="beforeIMgUpload"
                                :on-success="logImgSuccess"
                                name="file"
                                :limit=10
                                :on-exceed="exceedImg"
                                :on-remove="handleRemove">
                                <i slot="default" class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                    </div>
                </div>
            </div>
             <div slot="footer">
                <el-button @click.native.prevent="cancel(11)" size="small" plain>取消</el-button>
                <el-button type="primary"  v-preventReClick="1500" @click.native.prevent="problemLogBtn(8)" size="small" plain>保存</el-button>
            </div>
        </Modal>

        <!-- 安全模块弹框 -->
        <Modal v-model="handleSafetyReportModal" title="问题详情" width="900px;" :mask-closable="false" :footer-hide="problemReport.state==100||!problemReport.operationFlag">
            <div class="problemReportModal">
                <div class="list">
                    <div class="box">
                        <el-steps  :active="Number(problemReport.active)"  process-status='wait' style="margin:auto;">
                            <el-step :title="item.name" v-for="(item,i) in problemReport.userList" :key="i">
                                <div slot="description">{{item.userName}}</div>
                                <div slot="description" v-if="item.opResult!=2">{{item.time}}</div>
                            </el-step>
                        </el-steps>
                    </div>
                </div>
                <div class="list">
                    <h2>
                        <span>问题信息</span>
                        <span class="logBgc" v-if="problemReport.urgency==1">一般</span>
                        <span class="logBgc" style="background:#909399;" v-if="problemReport.urgency==2">紧急</span>
                    </h2>
                    <div class="item">
                        <div class="left">
                            <span>检查人 ：</span>
                            <span>{{problemReport.userName}}</span>
                        </div>
                        <div class="right">
                            <span>检查部位 ：</span>
                            <span>{{problemReport.partName}}</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="left">
                            <span>检查时间 ：</span>
                            <span>{{problemReport.checkTime}}</span>
                        </div>
                        <div class="right">
                            <span>检查地点 ：</span>
                            <div class="rightText"> {{problemReport.address}}</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="left">
                            <span>问题类别 ：</span>
                            <span>{{problemReport.issueTypeName}}</span>
                        </div>
                        <div class="right">
                            <span>问题明细 ：</span>
                            <span>{{problemReport.issueContent}}</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="left" style="width:100%;">
                            <span>检查说明 ：</span>
                            <span>{{problemReport.checkDesc}}</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="right " >
                            <span style="white-space:nowrap;">现场图片 ：</span>
                            <div class="img">
                                <img :src="item" alt="" v-for="(item,i) in problemReport.imgUrlList" :key="i">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list" >
                    <h2>整改要求</h2>
                    <div class="item">
                        <div class="left">
                            <span>整改人 ：</span>
                            <span>{{problemReport.operatorName}}</span>
                        </div>
                        <div class="right">
                            <span>整改期限 ：</span>
                            <span>{{problemReport.rectifyTime}}</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="textBox">
                            <span>整改要求 ：</span>
                            <div >{{problemReport.rectifyRequire}}</div>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <h2>
                        <span>复查信息</span>
                    </h2>
                    <div class="item">
                        <div class="left">
                            <span>复查人 ：</span>
                            <span>{{problemReport.reviewName}}</span>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <h2>
                        <span>核验信息</span>
                    </h2>
                    <div class="item">
                        <div class="left">
                            <span>核验人 ：</span>
                            <span>{{problemReport.checkName}}</span>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <h2>其他信息</h2>
                    <div class="item">
                        <div class="left">
                            <span>抄送人 ：</span>
                            <span>{{problemReport.sendName}}</span>
                        </div>
                    </div>
                </div>
                <template >
                    <div class="logBox"  style="margin-top:20px;">
                        <div class="list" v-for="(item,i) in problemReport.logList" :key="i">
                            <h2>
                                <span v-if='item.opType==2'>整改结果</span>
                                <span v-if='item.opType==3'>复查结果</span>
                                <span v-if='item.opType==4'>核验结果</span>
                                <span class="logBgc" v-if='item.opType!=1&&item.opResult==1'>合格</span>
                                <span class="logBgc" v-if='item.opType!=1&&item.opResult==2'>不合格</span>
                            </h2>
                            <div class="item">
                                <div class="left">
                                    <span v-if='item.opType==2'> 整改人 ：</span>
                                    <span v-if='item.opType==3'> 复查人 ：</span>
                                    <span v-if='item.opType==4'> 核验人 ：</span>
                                    <span>{{item.userName}}</span>
                                </div>
                                <div class="right">
                                    <span v-if='item.opType==2'>整改时间 ：</span>
                                    <span v-if='item.opType==3'>复查时间 ：</span>
                                    <span v-if='item.opType==4'>核验时间 ：</span>
                                    <span>{{item.opTime}}</span>
                                </div>
                            </div>
                            <div class="item">
                                  <div class="left">
                                    <span v-if='item.opType==2'> 整改说明 ：</span>
                                    <span v-if='item.opType==3'> 复查说明 ：</span>
                                    <span v-if='item.opType==4'> 核验说明 ：</span>
                                    <span>{{item.opDesc}}</span>
                                </div>
                            </div>
                            <div class="item">
                                  <div class="left imgbox">
                                    <span v-if='item.opType==2' > 现场图片 ：</span>
                                    <span v-if='item.opType==3' > 现场图片 ：</span>
                                    <span v-if='item.opType==4' > 现场图片 ：</span>
                                    <div class="img">
                                        <img :src="img"  alt="" v-for="img in item.imgUrlList" :key="img">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <div class="list" v-if="problemReport.operationFlag==1&&problemReport.state==10||problemReport.state==11||problemReport.state==12">
                    <h2>整改结果</h2>
                    <div class="item leftItem">
                        <div class="left img">
                            <span class="tip" style="color:red;">*</span>
                            <span>整改说明 ：</span>
                            <div class="inputbox">
                                <el-input  maxlength="200" show-word-limit placeholder="请输入"  type="textarea"  v-model="opDesc"></el-input>
                            </div>
                        </div>

                    </div>
                    <div class="item">
                        <div class="right img">
                            <span style="white-space:nowrap;">现场图片 ：</span>
                             <el-upload
                                :class="{hideAdd:imgFlag}"
                                ref='uploadImg'
                                :headers="headers"
                                :action="$axios.defaults.baseURL+'/ms/api/quality/check/uploadImg'"
                                list-type="picture-card"
                                accept="image/png, image/jpg, image/jpeg"
                                :before-upload="beforeIMgUpload"
                                :on-success="logImgSuccess"
                                name="file"
                                :limit=10
                                :on-exceed="exceedImg"
                                :on-remove="handleRemove">
                                <i slot="default" class="el-icon-plus" ></i>
                            </el-upload>
                        </div>
                    </div>
                </div>

                 <div class="list" v-if="problemReport.operationFlag==2&&problemReport.state==20">
                    <h2>复查结果</h2>
                    <div class="item" style="justify-content:flex-start" >
                        <span class="tip" style="color:red;">*</span>
                        <span>是否合格 ：</span>
                         <RadioGroup v-model="operationRadio">
                            <Radio label="合格"></Radio>
                            <Radio label="不合格"></Radio>
                        </RadioGroup>
                    </div>
                    <div class="item leftItem">
                        <div class="left img">
                            <span class="tip" style="color:red;">*</span>
                            <span>复查说明 ：</span>
                            <div class="inputbox">
                                <el-input  maxlength="200" show-word-limit placeholder="请输入"  type="textarea"  v-model="opDesc"></el-input>
                            </div>
                        </div>

                    </div>
                    <div class="item">
                        <div class="right img">
                            <span style="white-space:nowrap;">现场图片 ：</span>
                             <el-upload
                                :class="{hideAdd:imgFlag}"
                                ref='uploadImg'
                                :headers="headers"
                                :action="$axios.defaults.baseURL+'/ms/api/quality/check/uploadImg'"
                                list-type="picture-card"
                                accept="image/png, image/jpg, image/jpeg"
                                :before-upload="beforeIMgUpload"
                                :on-success="logImgSuccess"
                                name="file"
                                :limit=10
                                :on-exceed="exceedImg"
                                :on-remove="handleRemove">
                                <i slot="default" class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                    </div>
                </div>
                <div class="list" v-if="problemReport.operationFlag==3&&problemReport.state==30">
                    <h2 >核验结果</h2>
                    <div class="item" style="justify-content:flex-start">
                        <span>是否合格 ：</span>
                         <RadioGroup v-model="operationRadio">
                            <Radio label="合格"></Radio>
                            <Radio label="不合格"></Radio>
                            <span class="tip" style="color:red;">*</span>
                        </RadioGroup>
                    </div>
                    <div class="item leftItem">
                        <div class="left img">
                            <span class="tip" style="color:red;">*</span>
                            <span>核验说明 ：</span>
                            <div class="inputbox">
                                <el-input  maxlength="200" show-word-limit placeholder="请输入"  type="textarea"  v-model="opDesc"></el-input>
                            </div>
                        </div>

                    </div>
                    <div class="item">
                        <div class="right img">
                            <span style="white-space:nowrap;">现场图片 ：</span>
                             <el-upload
                                :class="{hideAdd:imgFlag}"
                                ref='uploadImg'
                                :headers="headers"
                                :action="$axios.defaults.baseURL+'/ms/api/quality/check/uploadImg'"
                                list-type="picture-card"
                                accept="image/png, image/jpg, image/jpeg"
                                :before-upload="beforeIMgUpload"
                                :on-success="logImgSuccess"
                                name="file"
                                :limit=10
                                :on-exceed="exceedImg"
                                :on-remove="handleRemove">
                                <i slot="default" class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                    </div>
                </div>
            </div>
             <div slot="footer">
                <el-button @click.native.prevent="cancel(11)" size="small" plain>取消</el-button>
                <el-button type="primary"  v-preventReClick="1500" @click.native.prevent="problemLogBtn(9)" size="small" plain>保存</el-button>
            </div>
        </Modal>

        <!-- 设备进出区域报警详情 -->
        <Modal v-model="GPSModal" title="查看范围区域" width="1000px" :mask-closable="false" :footer-hide="true">
            <div class="msg1">
                <div style="width:900px;height:500px;margin:20px auto;position: relative;">
                    <div id="container" class="container"></div>
                </div>
            </div>
        </Modal>
        <Modal v-model="handleSModal" title="报警信息处理" width="360px;" :mask-closable="false">
            <p style="width:100%;text-align:center;color:red;">
                处理消息一旦确认，就无法更改！
            </p>
            <div style="width:100%;text-align:center;font-size:16px;color:red;">
                您是否确认处理结果？
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submit(moduleType)" type="primary" size="small" plain>确定</el-button>
            </div>
        </Modal>
        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">您确定要删除选中消息吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain>确定</el-button>
            </div>
        </Modal>
        <Modal v-model="readModal" title="标记已读" width="360px;" :mask-closable="false">
            <div style="margin:10px">您确定要标记选中的消息为已读吗？</div>
            <div slot="footer">
                <el-button @click="cancel(6)" type="info" size="small" plain>取消</el-button>
                <el-button @click="read" type="primary" size="small" plain>确定</el-button>
            </div>
        </Modal>
        <Modal v-model="allDelModal" title="全部删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">您确定要删除全部消息吗？</div>
            <div slot="footer">
                <el-button @click="cancel(7)" type="info" size="small" plain>取消</el-button>
                <el-button @click="allDel" type="primary" size="small" plain>确定</el-button>
            </div>
        </Modal>
        <Modal v-model="allreadModal" title="全部已读" width="360px;" :mask-closable="false">
            <div style="margin:10px">您确定要标记全部消息为已读吗？</div>
            <div slot="footer">
                <el-button @click="cancel(8)" type="info" size="small" plain>取消</el-button>
                <el-button @click="allread" type="primary" size="small" plain>确定</el-button>
            </div>
        </Modal>

    </div>
</template>
<script>
import {RecordCreate} from "./../../mixins/record.js"
import {
    getMsgList,
    getMsgRead,
    getUnreadMsgNum,
    getMsgDel,
    getMsgDelAll,
    getMsgReadAll
} from "./../../api/api.js";
export default {
    mixins:[RecordCreate],
    name: "msgComponent",
    data() {
        return {
            headers: {
                Authorization:localStorage.getItem('COOKIE'),
            },
            tabActiveName:'0',
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            //list: [{ title: '杜鹃花开始的减肥的建行卡',content:'kjlgfdjgkjdfJGFDJKHjhkgfhdj几个发动快攻结合反对', time: '2025-12-12', },{ title: '杜鹃花开始的减肥的建行卡',content:'kjlgfdjgkjdfJGFDJKHjhkgfhdj几个发动快攻结合反对', time: '2025-12-12', }],
            list:[],
            count: 0,
            porjrctList: [],
            porjectType: "",
            isAdd: false,
            handleSModal: false,
            readModal: false,
            allDelModal: false,
            allreadModal: false,
            handleMachModal: false,
            handleEmpModal:false,
            handleFseModal: false,
            handleEnvModal: false,
            handleFimModal: false,
            handleEquipModal:false,
            handleReportModal:false,
            handleSafetyReportModal:false,
            GPSModal: false,
            msgList: [],
            moduleList: [
                {
                    id: 0,
                    name: "全部消息",
                    code: "all",
                    iconPath: "../../static/msg/all.svg",
                    iconSelectPath: "../../static/msg/all1.svg",

                },
                /* {
                    id: 1,
                    name: "设备消息",
                    code: "mach",
                    iconPath: "../../static/msg/mach.svg",
                    iconSelectPath: "../../static/msg/mach1.svg",

                },
                {
                    id: 2,
                    name: "劳务消息",
                    code: "emp",
                    iconPath: "../../static/msg/emp.svg",
                    iconSelectPath: "../../static/msg/emp1.svg",

                },
                // {
                //   id: 3,
                //   name: "物资消息"
                // },
                {
                    id: 4,
                    name: "环境消息",
                    code: "env",
                    iconPath: "../../static/msg/env.svg",
                    iconSelectPath:"../../static/msg/env1.svg" ,
                },
                // {
                //     id: 5,
                //     name: "智能监控消息",
                //     code: "fim",
                //     iconPath: "../../static/msg/fim.svg",
                //     iconSelectPath:"../../static/msg/fim1.svg" ,
                // },
                {
                    id: 6,
                    name: "特种设备消息",
                    code: "fse",
                    iconPath: "../../static/msg/fse.svg",
                    iconSelectPath:"../../static/msg/fse1.svg" ,
                },
                // {
                //     id: 7,
                //     name: "考勤设备",
                //     code: "equip",
                //     iconPath: "../../static/msg/equip.svg",
                //     iconSelectPath:"../../static/msg/equip1.svg" ,
                // },
                {
                    id: 8,
                    name: "质量管理信息",
                    code: "quality",
                    iconPath: "../../static/msg/quality.svg",
                    iconSelectPath:"../../static/msg/quality1.svg" ,
                },
                {
                    id: 9,
                    name: "安全管理信息",
                    code: "safety",
                    iconPath: "../../static/msg/safety.svg",
                    iconSelectPath:"../../static/msg/safety1.svg" ,
                } */
            ],
            btnList:[
                {
                    id: 0,
                    name: "全部消息",
                    code: "all",
                    iconPath: "../../static/msg/all.svg",
                    iconSelectPath: "../../static/msg/all1.svg",
                },
            ],
            activeId: 0,
            flag: true,
            deleteModal: false,
            disableFlag: false,
            state: "",
            mFlag: true,
            moduleType: 0,
            readList: [],
            msgCountList: [],
            //tableHeight: window.innerHeight - 260 > 500 ? window.innerHeight - 260 : 500,


        };
    },

    methods: {
        headClass(){
            return 'color: #666666;background: #F2F2F2 !important;'
        },
        setTabClick(name) {
            console.log(name)
            if(name==='0'){
                name = Number(name)
            }
            this.pageNum = 1;
            this.current = 1;
            this.activeId = name;
            this.tabActiveName = name
            this.getAllMsg();
        },
        getCount() {
            let parmas = {
                deptId: this.porjectType
            };
            getUnreadMsgNum(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.count = res.data.total;
                        if (this.activeId == 0) {
                            this.count = res.data.total;
                        } else if (this.activeId == 1) {
                            this.count = res.data.machMsgNum;
                        } else if (this.activeId == 4) {
                            this.count = res.data.envMsgNum;
                        } else if (this.activeId == 5) {
                            this.count = res.data.fimMsgNum;
                        } else if (this.activeId == 6) {
                            this.count = res.data.fseMsgNum;
                        }
                        this.msgCountList = [
                            {
                                id:0,
                                count:res.data.total == undefined ? 0 :res.data.total,
                            },
                            {
                                id:1,
                                count:res.data.machMsgNum == undefined ? 0 :res.data.machMsgNum,
                            },
                            {
                                id:2,
                                count:res.data.empMsgNum == undefined ? 0 :res.data.empMsgNum,
                            },
                            {
                                id:4,
                                count:res.data.envMsgNum == undefined ? 0 :res.data.envMsgNum,
                            },
                            {
                                id:5,
                                count:res.data.fimMsgNum == undefined ? 0 :res.data.fimMsgNum,
                            },
                            {
                                id:6,
                                count:res.data.fseMsgNum == undefined ? 0 :res.data.fseMsgNum,
                            },
                            {
                                id:7,
                                count:res.data.equipMsgNum == undefined ? 0 :res.data.equipMsgNum,
                            },
                            {
                                id:8,
                                count:res.data.qualityMsgNum == undefined ? 0 :res.data.qualityMsgNum,
                            },
                            {
                                id:9,
                                count:res.data.safetyMsgNum == undefined ? 0 :res.data.safetyMsgNum,
                            }

                        ];
                        for (let i =0 ;i<this.btnList.length; i++){
                            for(let j = 0; j < this.msgCountList.length; j++) {
                                if(this.btnList[i].id == this.msgCountList[j].id) {
                                    this.btnList[i]['count'] = this.msgCountList[j].count
                                }
                            }
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //获取所有消息列表
        getAllMsg() {
            let parmas = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                deptId: this.porjectType,
                state: this.state,
                moduleType: this.activeId === 0 ? "" : this.activeId
            };
            getMsgList(parmas)
                .then(res => {
                    if (res.code == 200) {
                        if (this.mFlag) {
                            this.getCount();
                        }
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                        let arr = [];
                        this.list.forEach(i => {
                            if (i.state == 0) {
                                arr.push(i);
                            }
                        });
                        if (arr.length > 0) {
                            this.disableFlag = false;
                        } else {
                            this.disableFlag = true;
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        pageChange(index) {
            this.pageNum = index;
            this.current = index;
            this.getAllMsg();
        },
        pageSizeChange(index){
           this.pageSize =index;
           this.getAllMsg();
        },
        //多选
        listSelectOne(selection, row) {
            this.msgList = [];
            this.readList = [];
            selection.forEach(i => {
                this.msgList.push(i.id);
                if (i.state == 0) {
                    this.readList.push(i.id);
                }
            });
        },
        //全选
        listSelectALL(selection) {
            this.msgList = [];
            this.readList = [];
            selection.forEach(i => {
                this.msgList.push(i.id);
                if (i.state == 0) {
                    this.readList.push(i.id);
                }
            });
        },
        //将消息标记为已读
        getRead() {
            this.readModal = true;
        },
        read() {
            let parmas = {
                idList: this.readList
            };
            getMsgRead(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.readModal = false;
                        this.getAllMsg();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //标记所有消息已读
        getAllRead() {
            this.allreadModal = true;
        },
        allread() {
            let parmas = {
                deptId: this.porjectType,
                moduleType: this.activeId == 0 ? "" : this.activeId
            };
            getMsgReadAll(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.pageNum = 1;
                        this.current = 1;
                        this.allreadModal = false;
                        this.getAllMsg();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //删除所有消息
        getAllDel() {
            this.allDelModal = true;
        },
        allDel() {
            let parmas = {
                deptId: this.porjectType,
                state: this.state,
                moduleType: this.activeId == 0 ? "" : this.activeId
            };
            getMsgDelAll(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.pageNum = 1;
                        this.current = 1;
                        this.allDelModal = false;
                        this.getAllMsg();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //删除消息
        getDel() {
            this.deleteModal = true;
        },
        detele() {
            let parmas = {
                idList: this.msgList
            };
            getMsgDel(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.pageNum = 1;
                        this.current = 1;
                        this.deleteModal = false;
                        this.getAllMsg();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        rowClick(row) {
            console.log('row: ', row);
            this.warnId = row.warnId;
            this.moduleType = row.moduleType;
            //未读0 已读1
            if (row.state == 0) {
                this.readList = [row.id];
                this.read();
            }
            //moduleType 1:设备报警详情 2:劳务报警详情 3:物质报警详情 4:环境报警详情 5:智能监控报警详情 6:特种设备报警详情 8:质量管理  9:安全管理
            if (row.moduleType == 1) {
                this.getMachDetails(row.warnId,false);
            } else if (row.moduleType == 6) {
                this.getFseDetails(row.warnId);
            } else if (row.moduleType == 4) {
                this.getEnvDetails(row.warnId);
            } else if (row.moduleType == 5) {
                this.getFimDetails(row.warnId);
            } else if(row.moduleType == 2){
                this.getEmpDetails(row.warnId);
            } else if(row.moduleType == 7) {
                this.getEquipDetails(row.warnId,false);
            }else if(row.moduleType==8){
                this.getReportDetails(row.warnId,8)
            }else if(row.moduleType==9){
                this.getReportDetails(row.warnId,9)
            }else if(row.moduleType==10){
                if(row.title == '工作计划审批') {
                    console.log('工作计划审批');
                } else if(row.title == '人员入场审批') {
                    console.log('人员入场审批');
                }
            }
        },
        ok() {
            if (this.handleRemark == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请填写报警原因"
                });
                return;
            }
            if (this.handleResult == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请填写处理结果"
                });
                return;
            }
            this.handleSModal = true;
        },
        submit(moduleType) {
            let parmas;
            if (moduleType == 5) {
                parmas = {
                    resultId: this.warnId,
                    handleResult: this.handleResult,
                    handleRemark: this.handleRemark
                };
            } else {
                parmas = {
                    warnId: this.warnId,
                    handleResult: this.handleResult,
                    handleRemark: this.handleRemark
                };
            }
            //moduleType 1:设备报警处理 2:劳务报警处理 3:物质报警处理 4:环境报警处理 5:智能监控报警处理 6:特种设备报警处理
            if (moduleType == 1) {
                this.getMachHandle(parmas);
            } else if (moduleType == 6) {
                this.getFseHandle(parmas);
            } else if (moduleType == 4) {
                this.getEnvHandle(parmas);
            } else if (moduleType == 5) {
                this.getFimHandle(parmas);
            } else if (moduleType == 2) {
                this.getEmpHandle(parmas);
            } else if (moduleType == 7) {
                this.getEquipHandle(parmas)
            }
        },
        cancel(type) {
            if (type == 0) {
                this.handleMachModal = false;
            } else if (type == 1) {
                this.handleSModal = false;
            } else if (type == 2) {
                this.deleteModal = false;
            } else if (type == 3) {
                this.handleFseModal = false;
            } else if (type == 4) {
                this.handleEnvModal = false;
            } else if (type == 5) {
                this.handleFimModal = false;
            } else if (type == 6) {
                this.readModal = false;
            } else if (type == 7) {
                this.allDelModal = false;
            } else if (type == 8) {
                this.allreadModal = false;
            } else if(type == 9) {
                this.handleEmpModal = false;
            } else if (type == 10 ) {
                this.handleEquipModal =false;
            }else if(type==11){
                this.handleReportModal=false;
                this.handleSafetyReportModal=false;
                this.opResult = '';
                this.opDesc='';
                this.reportImgUrl = [];
                this.operationRadio='合格'
                this.$refs.uploadImg.clearFiles();
            }
        },
        //电子围栏报警区域
        searchGps() {
            var _that = this;
            _that.GPSModal = true;
            if(this.moduleType == 7) {
                let lng,lat,polygon,circle;
                let maplng,maplat
                if(this.fenceObjList[0].type == 1) {
                    //计算多边形中心点的坐标;
                    var polygonPointList = this.fenceObjList[0].polygonPointList;
                    var a = [];
                    var b = [];
                    for (let i in polygonPointList) {
                        a.push(polygonPointList[i].lat);
                        b.push(polygonPointList[i].lng);
                        //多边形的坐标点
                        let x = [polygonPointList[i].lng, polygonPointList[i].lat];
                    }
                    let latSum = 0;
                    for (let i in a) {
                        latSum += a[i];
                    }
                    maplat = latSum / a.length;
                    let lngSum = 0;
                    for (let i in b) {
                        lngSum += b[i];
                    }
                    maplng = lngSum / b.length;
                } else if(this.fenceObjList[0].type == 2) {
                    maplat = this.fenceObjList[0].centerPoint.lat;
                    maplng = this.fenceObjList[0].centerPoint.lng;
                }
                var machmap = new AMap.Map("container", {
                    resizeEnable: true, //是否监控地图容器尺寸变化
                    zoom: 14, //初始化地图层级
                    center: [maplng, maplat], //初始化地图中心点
                    layers: [
                        // 卫星
                        new AMap.TileLayer.Satellite(),
                        // 路网
                        new AMap.TileLayer.RoadNet()
                    ]
                });
                this.fenceObjList.forEach((v , i ) => {
                    if (v.type == 1) {
                        //计算多边形中心点的坐标;
                        let polygonPointList = v.polygonPointList;
                        let path = [];
                        for (let j in polygonPointList) {
                            //多边形的坐标点
                            let x = [polygonPointList[j].lng, polygonPointList[j].lat];
                            path.push(x);
                        }
                        polygon = new AMap.Polygon({
                            path: path,
                            strokeColor: this.colors[i],
                            strokeWeight: 6,
                            strokeOpacity:   0.5,
                            fillOpacity:  0.8 ,
                            fillColor: this.colors[i],
                            zIndex: 50
                        });
                        machmap.add(polygon);
                        // 缩放地图到合适的视野级别
                        machmap.setFitView([polygon])
                    } else if (v.type == 2) {
                        lat = v.centerPoint.lat;
                        lng = v.centerPoint.lng;
                        let radius = v.radius;
                        circle = new AMap.Circle({
                            center: [lng, lat],
                            radius: radius, //半径
                            borderWeight: 3,
                            strokeColor: this.colors[i],
                            strokeWeight: 6,
                            strokeOpacity: 0.5 ,
                            fillOpacity:  0.8 ,
                            strokeStyle: "dashed",
                            strokeDasharray: [10, 10],
                            // 线样式还支持 'dashed'
                            fillColor: this.colors[i],
                            zIndex: 50
                        });
                        circle.setMap(machmap);
                        // 缩放地图到合适的视野级别
                        machmap.setFitView([circle]);
                    }
                });
                var mouseTool = new AMap.MouseTool(machmap);
                // 构造官方卫星、路网图层
                var satelliteLayer = new AMap.TileLayer.Satellite();
                var roadNetLayer = new AMap.TileLayer.RoadNet();
                //添加图层
                machmap.add([satelliteLayer, roadNetLayer]);
            } else {
                if (_that.type == 1) {
                    var polygonPointList = _that.pointList;
                    var a = [];
                    var b = [];
                    var path = [];
                    for (let i in polygonPointList) {
                        a.push(polygonPointList[i].lat);
                        b.push(polygonPointList[i].lng);
                        //多边形的坐标点
                        let x = [polygonPointList[i].lng, polygonPointList[i].lat];
                        path.push(x);
                    }
                    let latSum = 0;
                    for (let i in a) {
                        latSum += a[i];
                    }
                    var lat = latSum / a.length;
                    let lngSum = 0;
                    for (let i in b) {
                        lngSum += b[i];
                    }
                    var lng = lngSum / b.length;
                    var polygon = new AMap.Polygon({
                        path: path,
                        strokeColor: "#ff00ff",
                        strokeWeight: 6,
                        strokeOpacity: 0.2,
                        fillOpacity: 0.4,
                        fillColor: "#ff00ff",
                        zIndex: 50
                    });
                    var map = new AMap.Map("container", {
                        zoom: 14,
                        center: [lng, lat]
                    });

                } else if (_that.type == 2) {
                    var lat = _that.centerPoint.lat;
                    var lng = _that.centerPoint.lng;
                    var radius = _that.radius;
                    var circle = new AMap.Circle({
                        center: [lng, lat],
                        radius: radius, //半径
                        borderWeight: 3,
                        strokeColor: "#ff00ff",
                        strokeOpacity: 1,
                        strokeWeight: 6,
                        strokeOpacity: 0.2,
                        fillOpacity: 0.4,
                        strokeStyle: "dashed",
                        strokeDasharray: [10, 10],
                        // 线样式还支持 'dashed'
                        fillColor: "#ff00ff",
                        zIndex: 50
                    });
                    var map = new AMap.Map("container", {
                        zoom: 14,
                        center: [lng, lat]
                    });
                }
                var mouseTool = new AMap.MouseTool(map);
                // 构造官方卫星、路网图层
                var satelliteLayer = new AMap.TileLayer.Satellite();
                var roadNetLayer = new AMap.TileLayer.RoadNet();
                //添加图层
                map.add([satelliteLayer, roadNetLayer]);
                if (_that.type == 1) {
                    map.add(polygon);
                    // 缩放地图到合适的视野级别
                    map.setFitView([polygon]);
                } else if (_that.type == 2) {
                    // circle.setMap(map);
                    map.add(circle);
                    // 缩放地图到合适的视野级别
                    map.setFitView([circle]);
                }
            }
        },
        //关闭二级菜单
        onMsgExpend() {
            this.$store.commit('setMsgExpend',false)
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
        msgExpend() {
           return this.$store.state.msgExpend
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.porjectType = val.deptId;
                this.getAllMsg();
            }
        },
        $route(to, from) {
            if (to.path == "/msg/all") {
                this.state = "";
                this.mFlag = true;
            } else if (to.path == "/msg/unread") {
                this.state = 0;
                this.mFlag = true;
            } else if (to.path == "/msg/read") {
                this.state = 1;
                this.mFlag = false;
            }
        },

    },
    mounted() {

        this.porjectType = this.$store.state.porjectObject.deptId;
        for(let i =0 ; i<this.$store.state.ModalArr.length; i++ ) {
            for(let j =0; j<this.moduleList.length; j++) {
                if (this.$store.state.ModalArr[i] == this.moduleList[j].code) {
                    this.btnList.push(this.moduleList[j])
                }
            }
        }
        if (this.$route.path == "/msg/all") {
            this.state = "";
            this.mFlag = true;
        } else if (this.$route.path == "/msg/unread") {
            this.state = 0;
            this.mFlag = true;
        } else if (this.$route.path == "/msg/read") {
            this.state = 1;
            this.mFlag = false;
        }
        this.getAllMsg();
        // eventBus.$on('expend', (data) => { this.msgExpend = true })
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/warn.less";
.main_content {
    width: 100%;
    height: calc(100vh-105px);
    display: flex;
    flex-direction:row;
    background: #EBF2F8;
    // border:1px solid red;
    box-sizing: border-box;
    .cantainer{
        width: 160px;
        height: calc(100vh - 105px);
        background: #F9FAFB;
        box-sizing: border-box;
        overflow: hidden;
        .close{
            float: right;
            margin:8px 0;
        }
        ul{
            height: auto;
            list-style: none;
            // padding: 26px 0;
            width: 160px;
            // height: calc(100vh - 151px);
            li{
                // padding-left:40px;
                width: 160px;
                height: 100px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: #333333;
                font-size: 16px;
                // line-height:36px;
                cursor: pointer;
                // margin-bottom:34px;
                // border:1px solid green;
                .li_icon{
                    width: 40px;
                    height: 40px;
                }

                .iconbox{
                    position: relative;
                    .tag{
                        width: 35px;
                        border-radius: 10px !important;
                        position:absolute;
                        right:-30px;
                        top:-5px;
                        text-align: center;
                        font-size:16px;
                    }

                }
            }
            .active{
                position: relative;
                color: var(--themeColor);
                background: #E2F1FF!important;
                &::before{
                    content: '';
                    width: 160px;
                    height: 3px;
                    background: var(--themeColor);
                    border-radius: 0px;
                    position: absolute;
                    bottom: 0;
                    left: 0;

                }
                // background: #005DAB!important;
                // color: #FFFFFF!important;
            }
            .hover_tab{
                position: relative;
                color:#999;
                &::before{
                    content: '';
                    width: 0;
                    height: 110px;
                    background: var(--themeColor);
                    border-radius: 0px;
                    position: absolute;
                    top:0;
                    left: 0;
                }
            }
            .hover_tab:hover{
                 background: #E2F1FF!important;
            }
            .hover_tab:hover::before{
                width: 3px;

            }
        }
    }

    .right_content{
        padding:10px;
        flex:1;
        background: #F5F5F5;
        width: 100%;
        height: calc(100vh - 105px);
        box-sizing: border-box;
        .content{
            padding: 20px;
            width: 100%;
            height: calc(100vh - 125px);
            background: #fff;
            border-radius: 5px;
            //border:1px solid green;
            .item{
                margin-bottom:20px;
            }
            .table{
                height:calc(100vh - 280px);
                //border:1px solid red;
                overflow: auto;
                overflow-x: hidden;
                /deep/.is-disabled {
                    background-color:  #F2F2F2 !important;
                }
            }

        }

}
// .content {
//         width: 100%;
//         //height: calc(100% - 40px);
//         height: calc(100vh - 40px);;
//         background: #fff;
//         border-radius: 5px;
//         border:1px solid green;
//         .module {
//             width: 100%;
//             height: 50px;
//             margin-bottom: 10px;
//             /deep/.ivu-tabs-bar{
//                 padding: 0 20px;
//                 padding-top: 10px;
//             }
//             ul {
//                 width: 95%;
//                 margin: 0 auto;
//                 height: 100%;
//                 display: flex;
//                 align-items: center;
//                 flex-wrap: wrap;
//                 list-style: none;
//                 li {
//                     cursor: pointer;
//                     color: #000;
//                     font-size: 16px;
//                     margin-right: 10px;
//                     height: 40px;
//                     text-align: center;
//                     line-height: 40px;
//                 }
//             }
//             .item {
//                 width: 95%;
//                 margin: 0 auto;
//                 height: 100%;
//                 display: flex;
//                 align-items: center;
//                 flex-wrap: wrap;
//             }
//         }
//         .title {
//             width: 95%;
//             margin: 0 auto;
//             display: flex;
//             justify-content: space-between;
//             align-items: center;
//             padding-top: 20px;
//             // margin-bottom: 20px;
//             div {
//                 display: flex;
//                 justify-content: flex-start;
//                 align-items: center;
//                 .msgbox {
//                     margin-right: 10px;
//                     font-size: 24px;
//                     font-weight: 600;
//                 }
//                 span {
//                     color: red;
//                     font-size: 16px;
//                 }
//             }
//         }
//         .clearfix {
//             display: flex;
//             justify-content: space-between;
//             align-items: center;
//         }
//     }

}
.msg1 {
    width: 90%;
    margin: 0 auto;
    h2 {
        margin-top: 10px;
    }
    .list {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        // align-items: center;
        margin-top: 10px;
        .item {
            width: 50%;
            display: flex;
            justify-content: flex-start;
        }
        .w_time {
            width: 50%;
            p {
                width: 50%;
                display: flex;
                justify-content: flex-start;
                border-bottom: 1px solid #333333;
                margin-bottom: 10px;
                padding-bottom: 5px;
                span:first-child {
                    width: 130px;
                }
                span:nth-child(2) {
                    width: 50px;
                }
            }
            .active {
                border-bottom: none;
            }
        }
    }
    .title {
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        h2 {
            width: 50%;
        }
    }
}

#container {
    height: 100%;
}
.box {
    color: #1891FF;
    padding: 0;
}
.activebox {
    color: #676565 !important;
}
#fenceMap2 {
    height: 100%;
}
#fenceMap3{
   height: 100%;
}
.problemReportModal{
    .list{
        width: 96%;
        margin: auto;
        border-radius: 3px;
        padding: 10px 0;
        box-sizing: border-box;
        background-color: #fafafa;
        border-radius: 10px;
        margin-bottom: 10px;
        .box{
            width: 90%;
            margin: auto;
            margin-bottom: 20px;
        }
        h2{
            width: 90%;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            span{
                &.logBgc{
                    padding: 3px 10px;
                    box-sizing: border-box;
                    background-color: #1891FF;
                    color: #fff;
                    border-radius: 5px;
                }
            };
        }
        .item{
            width: 90%;
            margin: auto;
            margin-left: 10%;
            margin-bottom:10px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            &.leftItem{
                width: 80%;
                margin: 0 10%;
                margin-bottom:10px;
                .left.img{
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    width: 100%;
                    .inputbox{
                        flex: 1;
                    }

                }
            }
            .textBox{
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                span{
                    padding-right:10px;
                }
                div{
                    flex: 1;
                    padding-right: 20px;
                    box-sizing: border-box;
                }
            }
            .left{
                width: 50%;
                &.imgbox{
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: top;
                    span{
                        display: inline-block;
                        padding-right:10px;
                    }
                    .img{
                        flex: 1;
                        display: flex;
                        justify-content: flex-start;
                        align-items: flex-start;
                        flex-wrap: wrap;
                        img{
                            width: 77px;
                            height: 77px;
                            margin-right: 50px;
                            margin-bottom: 10px;
                        }
                    }
                }

                span{
                    &:first-of-type{
                        padding-right:10px;
                    }
                    vertical-align: top;
                }
            }
            .right{
                flex: 1;
                text-align: left;
                padding-right: 20px;
                box-sizing: border-box;
                display: flex;
                justify-content: flex-start;
                span{
                    &:first-of-type{
                        padding-right:10px;
                    }
                }
                .rightText{
                    flex: 1;
                }
                .img{
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    .imgBox{
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                    }
                    img{
                        width: 77px;
                        height: 77px;
                        margin-right: 50px;
                        margin-bottom: 10px;

                    }
                    /deep/.fileClass{
                        display: flex;
                        justify-content: flex-start;
                    }
                }
                /deep/.avatar-uploader{
                    flex: 1;
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    flex-wrap: wrap;
                }
                /deep/.el-upload--picture-card{
                    width: 77px;
                    height: 77px;
                    border: 1px dashed #d9d9d9;
                    border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                }
                /deep/.avatar-uploader .el-upload:hover {
                    border-color: #1891FF;
                }
                /deep/.avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 77px;
                    height: 77px;
                    line-height: 77px;
                    text-align: center;
                }
                /deep/.el-upload--picture-card{
                    line-height: 77px !important;
                }
                 /deep/.avatar {
                    width: 77px;
                    height: 77px;
                    display: block;
                }
                /deep/.el-upload-list--picture-card .el-upload-list__item {
                    width: 77px !important;
                    height: 77px !important;
                    margin-right: 49px;
                    margin-bottom: 10px;
                    &:nth-of-type(5n){
                        margin-right: 0px;
                    }
                }

            }
        }
        /deep/.avatar-uploader .el-upload {
            width: 125px;
            height: 125px;
            line-height: 125px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        /deep/.avatar-uploader .el-upload:hover {
            border-color: #1891FF;
        }
        /deep/.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 125px;
            height: 125px;
            line-height: 125px;
            text-align: center;
        }
         /deep/.avatar {
            width: 125px;
            height: 125px;
            display: block;
        }
        /deep/.el-step__icon-inner{
            display: none;
        }
        /deep/.el-step__icon{
            width: 10px;
            height: 10px;
        }
        /deep/.el-step__line{
            top: 7px;
        }
    }
}
.hideAdd {
    /deep/ .el-upload--picture-card {
      display: none;
    }
}




</style>
